<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>首页</h1>
    <a th:href="@{/target}">【测试1-初始测试】访问target.html</a><br/>

    <h2>@RequestMapping注解</h2>
    <a th:href="@{/test/test1}">【测试2-测试同时在类上和控制器方法上标注@RequestMapping的组合请求路径】</a><br/>

    <a th:href="@{/test/test2-1}">【(value属性)测试3-1-测试一个控制器方法可以对应多个请求路径】</a><br/>
    <a th:href="@{/test/test2-2}">【(value属性)测试3-2-测试一个控制器方法可以对应多个请求路径】</a><br/>

    <a th:href="@{/test/test3}">【(method属性)测试4-测试同一个控制器方法可以设置多个请求方式，这个是超链接的get请求】</a><br/>
    <form th:action="@{/test/test3}" method="post">
        <input type="submit" value="【(method属性)测试4-测试同一个控制器方法可以设置多个请求方式，这个是form表单的post请求】">
    </form>

    <a th:href="@{/test/test4(param1=1,param3=3,param4=5)}">【(param属性)测试5-测试params属性】</a><br/>

    <a th:href="@{/test/test5(param1=1,param3=3,param4=5)}">【(headers属性)测试7-测试headers属性】</a><br/>

    <a th:href="@{/test/testx6/testAnt}">【(ant风格的请求路径-?)测试7-测试ant风格的请求路径】</a><br/>
    <a th:href="@{/test/test6-1/testAnt}">【(ant风格的请求路径-*)测试7-测试ant风格的请求路径】</a><br/>
    <a th:href="@{/test/testy6-1/testAnt}">【(ant风格的请求路径-*)测试7-测试ant风格的请求路径】</a><br/>
    <a th:href="@{/test/testyx6-1/testAnt}">【(ant风格的请求路径-*)测试7-测试ant风格的请求路径】</a><br/>
    <a th:href="@{/test/test6-2/a/b/c/testAnt}">【(ant风格的请求路径-**)测试7-测试ant风格的请求路径】</a><br/>

    <a th:href="@{/test/test7/1/zhangSan}">【(请求路径支持占位符的形式)测试8-测试请求路径支持占位符的形式】</a><br/>

    <h2>请求参数获取</h2>
    <a th:href="@{/test/testServletAPI(age=12,userName=zhangSan)}">【测试通过Servlet的原生API获取请求参数】</a><br/>
    <a th:href="@{/test/testFormalParam(age=13,userName=zhangSan,hobby=lanqiu,hobby=ymq,hobby=ppq,test=x1,test=x2,test=x3)}">【测试通过控制器方法的形参获取请求参数】</a><br/>
    <a th:href="@{/test/testRequestParam(age=13,user_name=zhangSan,hobby=lanqiu,hobby=ymq,hobby=ppq,test=x1,test=x2,test=x3)}">【测试@RequestParam】</a><br/>

    <a th:href="@{/test/testRequestHeader}">【测试@RequestHeader】</a><br/>
    <a th:href="@{/test/testCookieValue}">【测试@CookieValue】</a><br/>
    <a th:href="@{/test/testPOJO(age=18,name=zhangSan,sex=male,address=baoan)}">【测试形参上使用实体类来接受参数，自动封装成实体类对象】</a><br/>

    <form th:action="@{/test/testPOJO}" method="post">
        年龄：<input type="text" name="age"><br/>
        姓名：<input type="text" name="name"><br/>
        性别：<input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女<br/>
        地址：<input type="text" name="address"><br>
        密码：<input type="password" name="password"><br>
             <input type="submit" value="使用实体类接受请求参数">
    </form>

    <h2>向域中共享数据</h2>
    <a th:href="@{/testScopeByServlet}">【测试通过ServletAPI向request域中共享数据】</a><br/>
    <a th:href="@{/testModelAndView}">【测试通过ModelAndView向request域中共享数据】</a><br/>
    <a th:href="@{/testModel}">【测试通过Model向request域中共享数据】</a><br/>
    <a th:href="@{/testMap}">【测试通过Map向request域中共享数据】</a><br/>
    <a th:href="@{/testModelMap}">【测试通过ModelMap向request域中共享数据】</a><br/>
    <a th:href="@{/testSession}">【测试通过HttpSession向session域中共享数据】</a><br/>
    <a th:href="@{/testApplication}">【测试通过ServletContext向application域中共享数据】</a><br/>

    <!--在使用RESTful风格时，需要处理put或delete的请求 -->
    <h2>在使用RESTful风格时，需要处理put或delete的请求</h2>
    <form th:action="@{/testPut}" method="post">
        <input type="hidden" name="_method" value="put" />
        <input type="submit" value="测试Form表单请求方式为PUT">
    </form>

    <!-- RestFul风格案例 -->
    <h2>RestFul风格案例</h2>
    <a th:href="@{/employee}">访问员工信息</a>

    <!-- HttpMessageConverter学习 -->
    <h2>HttpMessageConverter学习</h2>
    <form th:action="@{/testRequestBody}" method="post">
        年龄：<input type="text" name="age"><br/>
        姓名：<input type="text" name="name"><br/>
        性别：<input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女<br/>
        地址：<input type="text" name="address"><br>
        密码：<input type="password" name="password"><br>
             <input type="submit" value="测试@RequestBody注解">
    </form>

    <form th:action="@{/testRequestEntity}" method="post">
        年龄：<input type="text" name="age"><br/>
        姓名：<input type="text" name="name"><br/>
        性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女<br/>
        地址：<input type="text" name="address"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" value="测试RequestEntity注解">
    </form>

    <a th:href="@{/testResponseBody_test}">使用原始的Response对象向浏览器响应数据</a><br/>
    <a th:href="@{/testResponseBody}">@ResponseBody向浏览器响应数据</a><br/>
    <a th:href="@{/testResponseBody1}">@ResponseBody向浏览器响应数据(JSON数据)</a><br/>
    <a th:href="@{/testResponseBody2}">@ResponseBody向浏览器响应数据(JSON数据 ResponseEntity)</a><br/>

    <!--学习SpringMVC的拦截器-->
    <h2>学习SpringMVC的拦截器</h2>
    <a th:href="@{/test/testInterceptor}">测试拦截器</a><br>
    <a th:href="@{/test/testExceptionHandler}">测试异常处理</a><br>
    <a th:href="@{/test/testExceptionHandler1}">测试异常处理1</a><br>

    <!-- SpringMVC支持Ajax-->
    <h2>学习SpringMVC支持Ajax</h2>
    <div id="app">
        <a @click="testAxios" th:href="@{/testAxios}">SpringMVC处理ajax</a>
    </div>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
    <script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            testAxios:function (event) {
                axios({
                    method:"post",
                    url:event.target.href,
                    params:{
                        username:"admin",
                        password:"123456"
                    }
                }).then(function (response) {
                    alert(response.data);
                });
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>